<template>
  <div>
    <h1>用户管理</h1>
    <br>
    <el-form :inline="true" :model="form" class="demo-form-inline">
        
      <el-form-item label="用户名">
        <el-input v-model="form.user" placeholder="用户名"></el-input>
      </el-form-item>

      <el-form-item label="电话号码">
        <el-input v-model="form.tel" placeholder="电话号码"></el-input>
      </el-form-item>



      <el-form-item label="活动区域">
        <el-select v-model="form.region" placeholder="全部">
          <el-option label="全部" value=""></el-option>
          <el-option label="启用" value="1"></el-option>
          <el-option label="禁用" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="primary" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>

        <el-button type="warning"   @click="checkDel">选中删除</el-button>
        
        

 <template>
     <!-- listShow是显示的数据 -->
    <el-table :data="listShow" style="width: 100%"  @selection-change="handleSelectionChange">
      <el-table-column type="selection"  width="55"> </el-table-column>

      <el-table-column prop="nickname" label="用户名"  width="100"> </el-table-column>

      <el-table-column prop="mobile" label="电话号码"  width="160"> </el-table-column>

      <el-table-column  prop="status" label="状态" width="140"> 
          <template slot-scope="scope">
              <span>{{scope.row.status === 1 ? "启用" : "禁用"}}</span>
          </template>
      </el-table-column>

      <el-table-column  prop="created_at" label="添加时间" width="240"> 
          <template slot-scope="scope">
              <span>{{new Date(scope.row.created_at *1000 ).toLocaleString()}}</span>
          </template>
      </el-table-column>

      <el-table-column  label="操作" >
        
          <template slot-scope="scope" >
        <el-button type="primary" @click="goDetail(scope.row.uid)">详情</el-button>
        
        <el-popconfirm title="这是一段内容确定删除吗？" @confirm='isDelOne'>
          <el-button slot="reference" type="warning" 
           @click="delOne(scope.row.uid)">删除</el-button>
        </el-popconfirm>
    
        <el-button type="primary" @click="edit(scope.row)">编辑</el-button>
             
          </template>
      </el-table-column>

    </el-table>
  </template>     

<!-- 分页器 -->
  <el-pagination background :page-size='pageSize'
  :current-page='currentPage' @current-change='currentChange'
   layout="prev, pager, next" :total="list.length">
  </el-pagination>


<el-dialog
  title="提示" :visible.sync="dialogVisible" width="30%"
  :before-close="handleClose">
   <el-form :inline="true" :model="form2" class="demo-form-inline">
        
      <el-form-item label="用户名">
        <el-input v-model="form2.user" placeholder="用户名："></el-input>
      </el-form-item>

      <el-form-item label="电话号码">
        <el-input v-model="form2.tel" placeholder="电话号码"></el-input>
      </el-form-item>



      <el-form-item label="活动区域">
        <el-select v-model="form2.region">
          <el-option label="启用" value="1"></el-option>
          <el-option label="禁用" value="0"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="yisExit">确 定</el-button>
  </span>
</el-dialog>


  </div>
</template>

<script>
export default {
  name: "back",
  data() {
    return {
        // 总数据
        list:[],
        delID:'',
         visible: false,
        // 每页显示的数据
        // listShow:[],
        // 选中的内容
        isList:[],
        // 拷贝的内容
        listCopy:[],
        // 修改框
        dialogVisible:false,
        // 每页几个
        pageSize:5,
        // 第几页
        currentPage:1,

     form: {
          user: '',
          tel:'',
          region: '',
        },
     form2: {
          user: '',
          tel:'',
          region: '',
        },
        objID:'',
         
    };
  },
  created() {
      this.$axios({
          url:'/list.json',
          method:'get',
      }).then(res => {
          console.log(res.data)
          this.list = res.data
          this.listCopy = JSON.parse(JSON.stringify(res.data))
      })
  },
  methods: {
    //   搜索
    onSubmit() {
       let arr = this.listCopy.forEach(item => {
            return  (
                // 判断每一项内容中是否包括用户输入的字段
                item.nickname.includes(this.form.user) &&
                item.mobile.includes(this.form.tel) &&
                // 先判断是否输入，每页输入就是true，如果输入的是item.status是true，否则是false
                ( this.form.region === ''? true : (this.form.region ==  item.status? true : false ))
            )
        })
        this.list = arr
        
    },
    // 重置
    reset() {

    },
    // 选中删除
    checkDel() {
        // 删除选中数据
       for (var i = this.list.length - 1; i >=0; i--) {
       			this.isList.forEach(item => {
       				if ( this.list[i].uid === item.uid) {
       					this.list.splice(i, 1)
       				}
       			})
       		}


    },
    // 监听复选框变化
    handleSelectionChange(u){
        this.isList = u
        console.log(this.isList);
        
    },
    // 第几页发生变化时调用的
    currentChange(t){
        this.currentPage = t
    },
    //跳转详情
    goDetail(id) {
      console.log(id);
      this.$router.push({
        name:'deteil',
        query:{
          id
        }
      })
      
    },
    // 单个删除
    delOne(id) {
      console.log(id);
      
      this.visible =true
      this.delID = id
       
    },
    // 确定删除
    isDelOne() {
         console.log(1);

       this.list.forEach((item,i,arr) => {
         console.log(item);
         console.log(i);
         
        if(item.uid == this.delID){
          arr.splice(i,1)
        }
      })
      this.visible = false

    },
    // 编辑
    edit(obj) {
      console.log(obj.status.toString());
      
      
      // 把修改的数据的id存起来
      this.objID = obj.uid
      // 显示弹窗
      this.dialogVisible = true
      // 显示默认值
        this.form2.user = obj.nickname
        this.form2.tel = obj.mobile
        this.form2.regions = obj.status.toString();

    },
    // 点击确认修改
    yisExit() {
      console.log(this.form2.regions);
      
      this.list.forEach((item,index,arr) => {
        if(item.uid === this.objID){
          item.nickname = this.form2.user
          item.mobile = this.form2.tel
          item.status = this.form2.regions
        }
      })
      this.dialogVisible = false

    },
    //
     handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
  
  },
  //组件挂载
  components: {},
  //计算属性
  computed: {
      listShow() {
        //   根据页码的变化，截取数据  第一页是1-5  第二页是6-10 。。。
        return  this.list.slice((this.currentPage -1) * this.pageSize,this.currentPage * this.pageSize,)

      }
  },
  //过滤器
  filters: {},
};
</script>

<style lang="scss" scoped></style>
